{extend name='common/common' /}
{block name="style"}
<style media="screen">
#treeBox{
	max-height: 600px;
	overflow: auto;
}
.contextmenu{
	background: #2f4050;
	width: 120px;
	position: absolute;
	z-index: 9999;
	display: none;
	padding:0;
	box-shadow: 3px 3px 3px #888888;
	min-height: 144px;
}
.contextmenu li {
	list-style-type:none;
	color:#a7b1c2;
	border-bottom: 1px solid #a7b1c2;
	padding:8px;
	font-size: 14px;
}
.contextmenu li:hover{
	color: #FFF;
	cursor: pointer;
	border-left:4px solid #19aa8d
}
#main .filterText{
	width: 217px;
}
</style>
{/block}
{block name="content"}
<el-col :lg="12">
	<el-card class="box-card">
		<div slot="header">
			<span class="span-primary"><i class="fa fa-tree"></i></span>
			导航与分类
			{if authCheck('homemgr/navcateadd')}
			<el-button type="primary" class="header-btn" @click="addTopNode" plain size="small">添加导航</el-button>
			{/if}
		</div>
		<el-input
		  placeholder="输入关键字进行过滤"
		  v-model="filterText" class="filterText">
		</el-input>
		<div id="treeBox">
			<el-tree :data="treeData" node-key="id"
				ref="tree"
				:props="props"
				:filter-node-method="filterNode"
				@node-contextmenu="contextmenu">
			</el-tree>
		</div>
	</el-card>
</el-col>
<ul id="contextmenu" class="contextmenu">
	{if authCheck('node/nodeadd')}
	<li @click="addSubNode"><i class="fa fa-plus"></i> 添加子节点</li>
	{/if}
	{if authCheck('node/nodeedit')}
	<li @click="editNode"><i class="fa fa-edit"></i> 编辑节点</li>
	{/if}
	{if authCheck('node/nodedel')}
	<li @click="delNode"><i class="fa fa-trash-o"></i> 删除节点</li>
	{/if}
	<li><i class="fa fa-ban"></i> 取消操作</li>
</ul>
{/block}
{block name="component"}
<div id="FormBox">
<el-dialog :title="FormTitle" :visible.sync="showForm" fullscreen>
	<div class="FormBox">
		<el-form
			label-width="100px" :model="form"
			:rules="rules" ref="form" class="curForm">
			<el-form-item label="节点名称" prop="name">
				<el-input v-model="form.name" placeholder="请输入节点名称"></el-input>
			</el-form-item>
			<el-form-item label="所属节点" prop="show_pid">
				<el-input v-model="show_pid" disabled></el-input>
			</el-form-item>
			<el-form-item label="节点标题" prop="title">
				<el-input v-model="form.title" placeholder="请输入节点标题"></el-input>
			</el-form-item>
			<el-form-item label="粗体标题" prop="title_important">
				<el-input v-model="form.title_important" placeholder="请输入粗体标题"></el-input>
			</el-form-item>
			<el-form-item label="摘要" prop="remark">
				<el-input v-model="form.remark" type="textarea" placeholder="请输入摘要"></el-input>
			</el-form-item>
			<el-form-item label="封面" prop="thumb" class="upThumb">
				<el-input v-model="form.thumb" placeholder="请上传封面" disabled></el-input>
				<el-button type="primary" plain @click="upThumb">上传</el-button>
			</el-form-item>
			<el-form-item label="节点链接" prop="src">
				<el-input v-model="form.src" placeholder="请输入节点链接(全小写)"></el-input>
			</el-form-item>
			<el-form-item label="节点排序" prop="sort">
				<el-input v-model="form.sort" placeholder="0"></el-input>
			</el-form-item>
			<el-form-item label="是否为分类" prop="is_cate">
				<el-radio-group v-model="form.is_cate" size="small">
					<el-radio-button :label="0">否</el-radio-button>
					<el-radio-button :label="1">是</el-radio-button>
				</el-radio-group>
			</el-form-item>
		</el-form>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button @click="showForm = false">取消</el-button>
		<el-button type="success" @click="subForm">保存</el-button>
	</div>
</el-dialog>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
			treeData:'',
			props:{
				label:"name",
			},
			operateNode:'',
			filterText: '',
		}
	},
	mounted:function() {
		this.getTreeData();
	},
	watch: {
		filterText(val) {
		this.$refs.tree.filter(val);
		}
    },
	methods:{
		getTreeData() {
			this.loading = true;
			$.getJSON("{:url('Homemgr/navcate')}",function(res){
				main.loading = false;
				main.treeData = res.data;
			});
		},
		contextmenu($event,data) {
			this.operateNode=data
			$(".contextmenu").hide();
			$(".contextmenu").css({
				"display":"block",
				"top":$event.clientY+"px",
				"left":$event.clientX+"px"
			});
		},
		addSubNode() {
			FormBox.form = {
				pid:this.operateNode.id,
				name:'',
				title:'',
				src:'',
				is_cate:1,
			};
			FormBox.subType = "add";
			FormBox.show_pid = this.operateNode.name;
			FormBox.FormTitle = "添加 “"+this.operateNode.name+"” 的子节点"
			FormBox.showForm = true;
		},
		addTopNode() {
			FormBox.form = {
				pid:0,
				name:'',
				title:'',
				title_important:"",
				remark:'',
				thumb:'',
				src:'',
				is_cate:0,
				sort:0,
			};
			FormBox.subType = "add";
			FormBox.show_pid = "顶级节点";
			FormBox.FormTitle = "添加导航"
			FormBox.showForm = true;
		},
		editNode() {
			FormBox.form = {
				id:this.operateNode.id,
				pid:this.operateNode.pid,
				name:this.operateNode.name,
				title:this.operateNode.title,
				title_important:this.operateNode.title_important,
				remark:this.operateNode.remark,
				thumb:this.operateNode.thumb,
				src:this.operateNode.src,
				is_cate:this.operateNode.is_cate,
				sort:this.operateNode.sort
			};
			FormBox.subType = "edit";
			FormBox.show_pid = "";
			FormBox.FormTitle = "编辑 “"+this.operateNode.name+"” 节点"
			FormBox.showForm = true;
		},
		delNode() {
			console.log(main.operateNode.children);
			var tips = "删除“"+this.operateNode.name+"”后不可恢复，确定继续吗？";
			main.$confirm(tips, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				if(main.operateNode.children){
					main.$notify.error({
						title: '错误',
						message: '该节点下有子节点，不可删除'
					});
					return false;
				}
				$.post("{:url('Homemgr/navcateDel')}",{
					'id':main.operateNode.id
				},function(res){
					if(res.code != 1){
						main.$notify.error({
							title: '错误',
							message: res.msg
						});
					}else{
						main.$notify({
							title: '成功',
							message: res.msg,
							type: 'success'
						});
						main.getTreeData();
					}
				})
			}).catch(() => {
				main.$notify.info({
					title: '消息',
					message: "删除已取消"
				});
			});
		},
		filterNode(value, data) {
	        if (!value) return true;
	        return data.name.indexOf(value) !== -1;
      	},
		upSuccess(res){
			FormBox.form.thumb = res.data.path;
			uploadAlert.is_show = false;
		},
	}
});
var FormBox = new Vue({
	el:"#FormBox",
	data() {
		return {
			showForm:false,
			subType:'add',
			FormTitle:"表单",
			show_pid:"顶级节点",
			form:{
				pid:0,
				name:'',
				title:'',
				title_important:"",
				remark:'',
				thumb:'',
				src:'',
				is_cate:0,
				sort:0,
			},
			rules:{
				name:[{required:true,message:'请输入节点名称',trigger:['blur','change']}]
			}
		}
	},
	methods:{
		subForm() {
			if(this.subType == 'add'){
				var url = "{:url('Homemgr/navcateAdd')}";
			}else{
				var url = "{:url('Homemgr/navcateEdit')}";
			}
			var param = this.form;
			$.post(url,param,function(res){
				if(res.code == 1){
					main.$notify({
						title:"成功",
						type:"success",
						message:res.msg
					});
					main.getTreeData();
					FormBox.showForm = false;
				}else{
					main.$notify.error({
						title:'错误',
						message:res.msg
					});
					FormBox.showForm = false;
				}
			})
		},
		upThumb() {
			if(this.form.name == ""){
				main.$notify.error({title:"错误",message:"请先填写名称"});
				return false;
			}
			uploadAlert.is_show = true;
			uploadAlert.upData = {
				targetpath:'NavThumb/' + this.form.name,
			}
		}
	}
})
$(document).on("click",function(){
	$(".contextmenu").hide();
})
</script>
{/block}
